<script setup>
import {computed, ref,watch} from 'vue';
let count = ref(1);
let addCount = function (e,n){
  count.value+=n;
  if(count.value % 2 ===0){
    e.target.style.border = '3px solid';
  }else{
    e.target.style.border = '3px dotted';
  }
}

let slow = ()=>{
  var n=0;
  for(var i=0;i<99999999;i++){
    n += i * 3.1415926
  }
  console.log('滚动')
}

let msg = ref('hellow world!');
let revMsg = computed(()=>{
  return msg.value.split('').reverse().join('');
})
let revMsg2 =ref(msg.value.split('').reverse().join(''));

let cityName = ref('长沙');
watch(cityName,(newV,oldV)=>{
  console.log('新值' + newV);
  console.log('旧值' + oldV);
})

</script>

<template>
  <div>
     <p>count 的值是:{{ count }}</p>
     <button @click="addCount($event,3)">count + 1</button>
     <p>
      <a href="http://www.baidu.com" target="_blank" @click.prevent="addCount($event,5)">百度一下</a>
     </p>

    <hr>
    <div @click.capture="console.log('父元素')" class="buhuo">
      <button @click="console.log('子元素1')">正常冒泡</button>
      <button @click.stop="console.log('子元素2')">阻止冒泡</button>
    </div>

    <hr>
    <div @click="console.log('爷爷')" class="self">
      <div @click.self="console.log('爸爸')" class="self">
        <div @click="console.log('子元素')" class="self">self事件</div>
      </div>
    </div>

    <hr>
    <textarea name="" id="txt" cols="30" rows="10" @scroll="slow">
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    湖南幼儿师范高等专科学校
    </textarea>
    
    <hr>
    <p>初始msg:{{ msg }}</p>
    <p>反转后的msg（computed）:{{ revMsg }}</p>
    <p>反转后的msg（非计算）:{{ revMsg2 }}</p>
    <button @click="msg='hello'">修改源字符串</button>


    <hr>
    <input type="text" v-model="cityName">



  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
hr{
  margin-top: 40px;
}

.buhuo{
  margin: 30px;
  padding: 10px;
  border: 1px solid black;
}

.self{
  margin: 20px;
  padding: 10px;
  border: 1px solid black;
}

</style>
